import React, { Component } from "react";
import { Carousel, Grid } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./index.scss";
import { withRouter } from "react-router-dom";
import miaosha from "../../assets/images/miaosha_title.jpg";
import myaxios from "../../utils/myaxios";
import Axios from "axios";
let timer;
class Index extends Component {
  constructor(props) {
    super(props);
    this.box = React.createRef();
    this.indexcontentRef = React.createRef();
    this.likeListRef = React.createRef();
  }
  state = {
    data: [],
    imgHeight: 110,
    cartsImg: [],
    msList: [], //秒杀列表数据
    endDate: {}, //秒杀结束时间 时分秒
    booksList: [], //图书数据
    likeList: [], //猜你喜欢数据
    left: 0,
    backTop: false, //返回顶部栏默认隐藏
  };
  componentDidMount() {
    document.title="当当-全球领先的综合性网上购物中心";
    this.setState({
      // 轮播图的图片
      data: [
        "img51.ddimg.cn/85420146511381_y.jpg",
        "img63.ddimg.cn/ddimg/2047/1242366-1600322519.gif",
        "img62.ddimg.cn/upload_img/00796/1/1242x366-1599803493.jpg",
        "img53.ddimg.cn/86030092254753_y.jpg",
        "img56.ddimg.cn/79140098115606_y.jpg",
        "img61.ddimg.cn/upload_img/00796/ts0915_0921/1242x366-1600165140.jpg",
        "img53.ddimg.cn/97560180573953_y.jpg",
        "img63.ddimg.cn/upload_img/00796/1/1242x366-1597736350.jpg",
      ],
      // 分类的图片
      cartsImg: [
        {
          text: "畅销榜",
          icon:
            "http://img62.ddimg.cn/upload_img/00803/1/changxiao-1562827738.png",
        },
        {
          text: "新书榜",
          icon:
            "http://img60.ddimg.cn/upload_img/00803/1/xinshubang2-1562825207.png",
        },
        {
          text: "童书榜",
          icon:
            "http://img62.ddimg.cn/upload_img/00702/B/SY-iCON-3-5.10-1557488951.png",
        },
        {
          text: "今日促销",
          icon:
            "http://img63.ddimg.cn/upload_img/00702/B/icon-jrcx-1559563476.png",
        },
        {
          text: "特价书市",
          icon:
            "http://img62.ddimg.cn/upload_img/00705/B/icon-5.28-1559032809.png",
        },
        { text: "服装", icon: "http://img50.ddimg.cn/116550067538580_y.jpg" },
        {
          text: "当当超市",
          icon:
            "http://img63.ddimg.cn/upload_img/00528/000/7chaoshi-1545121233.png",
        },
        {
          text: "拼团",
          icon:
            "http://img61.ddimg.cn/upload_img/00528/000/00000-1564393723.png",
        },
        {
          text: "领卷中心",
          icon:
            "http://img62.ddimg.cn/upload_img/00528/000/9zhongxin-1545121233.png",
        },
        {
          text: "云阅读",
          icon:
            "http://img63.ddimg.cn/upload_img/00528/0000/12311-1556245256.jpg",
        },
      ],
      // 中国最大图书城数据
      booksList: [
        {
          text: "文艺小情节",
          subText: "书中大情怀",
          img: "http://img63.ddimg.cn/upload_img/00796/1/11.18-1575272441.png",
        },
        {
          text: "电子书",
          subText: "每满30减15",
          img:
            "http://img61.ddimg.cn/ddreader/dangebook/2020n9y30j15_500x500.jpg",
        },
        {
          text: "万种童书",
          subText: "阅读陪伴成长",
          img: "http://img60.ddimg.cn/upload_img/00796/1/10.28-1575272475.png",
        },
        {
          text: "阅享新生活",
          subText: "精彩无限",
          img: "http://img62.ddimg.cn/upload_img/00796/1/9.12-1568701928.png",
        },
        {
          text: "人文社科",
          subText: "知史知今",
          img: "http://img61.ddimg.cn/upload_img/00796/1/10.22-1575272532.png",
        },
        {
          text: "中小学教辅",
          subText: "向上吧少年",
          img: "http://img62.ddimg.cn/upload_img/00796/1/10.15-1575272579.png",
        },
        {
          text: "科技图书",
          subText: "发现探索",
          img: "http://img60.ddimg.cn/upload_img/00796/1/11.27-1575272631.png",
        },
        {
          text: "经济管理",
          subText: "钱程无限",
          img: "http://img60.ddimg.cn/upload_img/00796/1/10.25-1575272685.png",
        },
        {
          text: "考试图书",
          subText: "通关秘籍",
          img: "http://img63.ddimg.cn/upload_img/00796/1/9.25-1575272847.png",
        },
      ],
    });
    // 请求秒杀时间
    myaxios
      .get(
        "/api/touch/optimization/feed?page=0&udid=ffad04e3b8e143856c52753a1a8fb615&permanent_id=20200921085558761176104850535383520&client_version=1.0&app_id=touch&h5_server=1&user_client=touch&ct=touch&cv=1.0&ts=1600751161441&tc=8714457b5e8283b0a40aafc1b09c552e"
      )
      .then((res) => {
        let ms_data = res.result.columns[0];
        // console.log(ms_data.infos)
        let endDate = new Date(ms_data.infos[0].endDate).getTime(); //秒杀结束时间
        let nowDate = "";
        let newMs_arr = ms_data.infos.map(item => ({
          product_id:item.productId,
          couponModel:item.couponModel,
          price:item.originPrice,
          image_url:item.productImageUrl,
          dd_sale_price:item.salePrice,
          name:item.productName,
          promotionName:item.promotionName,
          promotionTag:item.promotionTag,
        }))
        // console.log(newMs_arr)
        timer = setInterval(() => {
          //当前时间
          nowDate = new Date().getTime();
          let lastDate = endDate - nowDate; //秒杀剩余时间
          let hours = parseInt(
            (lastDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          let minutes = parseInt((lastDate % (1000 * 60 * 60)) / (1000 * 60));
          let seconds = parseInt((lastDate % (1000 * 60)) / 1000);
          let endDate_obj = {
            hours: hours,
            minutes: minutes,
            seconds: seconds,
          };
          this.setState({
            endDate: endDate_obj,
          });
        }, 1);
        this.setState({
          msList: newMs_arr,
        });
      });
    // 请求猜你喜欢的数据
    Axios.get(
      "/h5ajax.php?action=home&img_size=h&perm_id=20200921085511252367185360789990108"
    ).then((res) => {
      this.setState({
        likeList: res.data.reco_list,
      });
    });
    this.indexcontentRef.current.parentElement.parentElement.parentElement.addEventListener(
      "scroll",
      this.handleScroll
    );
  }

  componentWillUnmount() {
    clearInterval(timer)
    // 卸载监听事件
    this.indexcontentRef.current.parentElement.parentElement.parentElement.removeEventListener(
      "scroll",
      this.handleScroll
    );
  }
  // 跳转到分类
  gotoCategory = (params) => {
    this.props.history.push("/category");
  };
  // 跳转到列表
  gotoGoodlist = (text) => {
    this.props.history.push("/goodList/" + text);
  };
  // 跳转到详情页
  gotoDetail = (goods_info) => {
    this.props.history.push({
      pathname: "/goodDetail",
      state: { goods_info: goods_info },
    });
  };
  // 滚动事件
  handleScroll = () => {
    let parentElement = this.indexcontentRef.current.parentElement.parentElement
      .parentElement;
    let scrollTop = parentElement.scrollTop; // 列表已经滚动的高度
    if (scrollTop > 1000) {
      this.setState({
        backTop: true,
      });
    } else {
      this.setState({
        backTop: false,
      });
    }
  };
  // 回到顶部
  backToTop = () => {
    let scrollTop = this.indexcontentRef.current.parentElement.parentElement
      .parentElement.scrollTop;
    let myTimer = setInterval(() => {
      scrollTop -= 200;
      if (scrollTop <= 0) {
        scrollTop = 0;
        window.clearInterval(myTimer);
      }
       this.indexcontentRef.current.parentElement.parentElement.parentElement.scrollTo(
         0,
         scrollTop
       );
    }, 10);
  };
  ToTop = (params) => {
    if (this.ListView) this.ListView.scrollTo(0, 0);
  };

  render() {
    return (
      <div className="dd-index" ref={(el) => (this.ListView = el)}>
        {/* 首页顶部开始 */}
        <div className="dd-index-top">
          <i className="iconfont icon-tubiaozhizuomoban"></i>
          <div className="dd-index-search">
            <SearchInput></SearchInput>
          </div>
          <i className="iconfont icon-caidan" onClick={this.gotoCategory}></i>
        </div>
        {/* 首页顶部结束 */}
        {/* 首页轮播图开始 */}
        <div className="dd-index-banner">
          <Carousel autoplay={true} infinite>
            {this.state.data.map((val) => (
              <a
                key={val}
                href="{val}"
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={`http://${val}`}
                  alt=""
                  style={{
                    width: "100%",
                    verticalAlign: "top",
                    height: "110px",
                  }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </div>
        {/* 首页轮播图结束 */}
        {/* 首页分类导航开始 */}
        <div className="dd-index-cart">
          <Grid
            onClick={(el) => {
              // this.state.cartsImg
              this.gotoGoodlist(el.text);
            }}
            data={this.state.cartsImg}
            activeStyle={false}
            columnNum={5}
            hasLine={false}
          />
        </div>
        {/* 首页分类导航结束 */}
        {/* 首页秒杀开始 */}
        <div className="dd-index-miaosha">
          <div className="miaosha-title">
            <img src={miaosha} alt="" />
          </div>
          <div className="miaosha-content">
            <div className="content-lastTime">
              <span className="time-hour time-t">
                {this.state.endDate.hours < 10
                  ? "0" + this.state.endDate.hours
                  : this.state.endDate.hours}
              </span>
              <span className="time-d">时</span>
              <span className="time-minute time-t">
                {this.state.endDate.minutes < 10
                  ? "0" + this.state.endDate.minutes
                  : this.state.endDate.minutes}
              </span>
              <span className="time-d">分</span>
              <span className="time-second time-t">
                {this.state.endDate.seconds < 10
                  ? "0" + this.state.endDate.seconds
                  : this.state.endDate.seconds}
              </span>
              <span className="time-d">秒</span>
            </div>
            <div className="content-list">
              <div
                className="list-item-box "
                ref={this.box}
                style={{ left: "0px" }}
              >
                {this.state.msList.map((v) => {
                  return (
                    <div
                      className="content-list-item"
                      key={v.product_id}
                      onClick={this.gotoDetail.bind(this, v)}
                    >
                      <div className="img-box">
                        <img src={v.image_url} alt="" />
                      </div>
                      <div className="item-name">{v.name}</div>
                      <div className="item-salePrice">￥{v.dd_sale_price}</div>
                      <div className="item-originPrice">￥{v.price}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        {/* 首页秒杀结束 */}
        <div className="dd-index-banner1">
          <img src="http://img51.ddimg.cn/222060123100431_y.jpg" alt="" />
        </div>
        {/* 图书城开始 */}
        <div className="dd-index-books">
          <div className="big-title">
            <img
              src="http://img61.ddimg.cn/upload_img/00705/yhj/tslc-bt.jpg"
              alt=""
            />
          </div>
          <ul className="sub-title">
            <li>
              当当商城<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              电子书<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              网络文学<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
          </ul>
          <div className="title-img1">
            <img
              src="http://img62.ddimg.cn/upload_img/00816/luchen/1242x332-1600695616.jpg"
              alt=""
            />
          </div>
          <div className="books-list">
            <Grid
              data={this.state.booksList}
              columnNum={3}
              itemStyle={{ width: "3.333333rem", height: "4.16rem" }}
              renderItem={(dataItem) => (
                <div
                  style={{ padding: "0 13px", height: "156px" }}
                  onClick={this.gotoGoodlist.bind(this, dataItem.text)}
                >
                  <div style={{ color: "#888", fontSize: "14px" }}>
                    <span style={{ color: "#323232" }}>{dataItem.text}</span>
                    <p style={{ color: "#ef2933", fontSize: "12px" }}>
                      {dataItem.subText}
                    </p>
                  </div>
                  <img
                    src={dataItem.img}
                    style={{ width: "100px", height: "100px" }}
                    alt=""
                  />
                </div>
              )}
            />
          </div>
        </div>
        {/* 图书城结束 */}
        {/* 服装鞋包开始 */}
        <div className="dd-index-clothes">
          <div className="big-title">
            <img
              src="http://img61.ddimg.cn/upload_img/00757/shuang11/biaoti-1540452487.jpg"
              alt=""
            />
          </div>
          <ul className="sub-title">
            <li>
              服装品牌榜单<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              服装上新<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              服装馆<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
          </ul>
          <div className="title-img1">
            <img
              src="http://img62.ddimg.cn/upload_img/00757/LOGO/loucengbanner-1565921661.jpg"
              alt=""
            />
          </div>
          <div className="clothes-list">
            <div className="clothes-list-item1">
              <div
                className="item1-left"
                onClick={this.gotoGoodlist.bind(this, "女装")}
              >
                <div className="left-title">
                  <h2>茵曼女装</h2>
                  <p>低至1折起</p>
                </div>
                <div className="left-img">
                  <img
                    className=""
                    src="http://img52.ddimg.cn/53840049727492_y.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item1-right">
                <div className="right-top">
                  <div className="top-title">
                    <h2>迪士尼童鞋</h2>
                    <p>限时99元2双 </p>
                  </div>
                  <div className="top-img">
                    <img
                      className=""
                      src="http://img51.ddimg.cn/107480065898271_y.jpg"
                      alt=""
                    />
                  </div>
                </div>
                <div className="right-top">
                  <div className="top-title">
                    <h2>韩都衣舍</h2>
                    <p>2件2.5折</p>
                  </div>
                  <div className="top-img">
                    <img
                      className=""
                      src="http://img60.ddimg.cn/upload_img/00738/123/500dh-1565321851.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="clothes-list-item2 clothes-list-item1 ">
              <div
                className="item1-right"
                style={{ borderRight: "1px solid #ccc", height: "84px" }}
              >
                <div className="right-top">
                  <div className="top-title">
                    <h2>361度</h2>
                    <p>折上2件4折 </p>
                  </div>
                  <div className="top-img">
                    <img
                      className=""
                      src="http://img51.ddimg.cn/198970066388831_y.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div className="item1-right" style={{ height: "84px" }}>
                <div className="right-top">
                  <div className="top-title">
                    <h2>达芙妮清仓</h2>
                    <p>限时2件2折 </p>
                  </div>
                  <div className="top-img">
                    <img
                      className=""
                      src="http://img62.ddimg.cn/upload_img/00601/111/500badi-1565008942.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="clothes-list-item3">
              <div className="item3-box">
                <div className="top-title">
                  <h2>达芙妮清仓</h2>
                  <p>限时2件2折 </p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img62.ddimg.cn/upload_img/00601/111/500badi-1565008942.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item3-box">
                <div className="top-title">
                  <h2>达芙妮清仓</h2>
                  <p>限时2件2折 </p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img61.ddimg.cn/upload_img/00601/111/500kalayang-1565010129.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item3-box">
                <div className="top-title">
                  <h2>达芙妮清仓</h2>
                  <p>限时2件2折 </p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img55.ddimg.cn/186920088342395_y.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item3-box" style={{ border: "none" }}>
                <div className="top-title">
                  <h2>达芙妮清仓</h2>
                  <p>限时2件2折 </p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img53.ddimg.cn/155170066039963_y.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 服装鞋包结束 */}
        {/* 聚实惠开始 */}
        <div className="dd-index-food">
          <div className="big-title">
            <img src="http://img50.ddimg.cn/178320095007290_y.jpg" alt="" />
          </div>
          <ul className="sub-title">
            <li>
              食品馆<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              休闲食品<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              粮油调味<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
            <li>
              夏日茶饮<i className="iconfont icon-youjiantou-tianchong"></i>
            </li>
          </ul>
          <div className="title-img1">
            <img src="http://img50.ddimg.cn/225580101461680_y.jpg" alt="" />
          </div>
          <div className="food-list">
            <div className="food-list-item1">
              <div
                className="item1-right"
                style={{ borderRight: "1px solid #ccc", height: "84px" }}
              >
                <div className="right-top">
                  <div className="top-title">
                    <h2>青岛啤酒</h2>
                    <p>爆款买1送1</p>
                  </div>
                  <div className="top-img">
                    <img
                      className=""
                      src="http://img58.ddimg.cn/178320131348938_y.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div className="item1-right" style={{ height: "84px" }}>
                <div className="right-top">
                  <div className="top-title">
                    <h2>良品铺子</h2>
                    <p>满199减120</p>
                  </div>
                  <div className="top-img">
                    <img
                      className=""
                      src="http://img56.ddimg.cn/178320106203026_y.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="food-list-item2">
              <div className="item2-box">
                <div className="top-title">
                  <h2>秒杀单品</h2>
                  <p>19.9元开抢</p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img60.ddimg.cn/upload_img/00589/techan/li-1570701876.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item2-box">
                <div className="top-title">
                  <h2>伊利牛奶</h2>
                  <p>下单减10</p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img57.ddimg.cn/178320131349077_y.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item2-box">
                <div className="top-title">
                  <h2>大希地牛排</h2>
                  <p>299减150</p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img62.ddimg.cn/upload_img/00589/techan/15pian-1564658149.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div className="item2-box" style={{ border: "none" }}>
                <div className="top-title">
                  <h2>汤臣倍健</h2>
                  <p>全场特惠</p>
                </div>
                <div className="top-img">
                  <img
                    className=""
                    src="http://img54.ddimg.cn/178320093983394_y.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 聚实惠结束 */}
        {/* 猜你喜欢开始 */}
        <div className="dd-index-like">
          <div className="like-title">
            <i className="iconfont icon-icon-test-copy"></i>
            <em>根据您的偏好猜您可能喜欢</em>
          </div>
          <div className="like-list clear-fix" ref={this.likeListRef}>
            {this.state.likeList.map((v, i) => {
              return (
                <div
                  className="like-list-item"
                  key={v.product_id}
                  onClick={this.gotoDetail.bind(this, v)}
                >
                  <div className="imgBox">
                    <img src={v.image_url} alt="" />
                  </div>
                  <div className="itemTitle">{v.name}</div>
                  {v.productTags &&
                    v.productTags.map((vv) => {
                      return (
                        <span
                          className={
                            vv.name === "限时抢" ||
                            vv.name === "秒杀" ||
                            vv.name === "拼团"
                              ? "TagsActive"
                              : "productTags"
                          }
                          key={vv.label_type}
                        >
                          {vv.name}
                        </span>
                      );
                    })}
                  <div className="itemPrice">
                    ￥<em>{v.price.split(".")[0]}</em>.{v.price.split(".")[1]}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        {/* 猜你喜欢结束 */}
        {/* 到底啦开始 */}
        <div className="dd-index-footerMsg">
          <em>^_^到底了，再拉裤子都掉啦</em>
        </div>
        {/* 到底啦结束 */}
        {/* 底部 */}
        <div className="footer-item">
          <div className="lgt">
            <span className="lg">
              <em>登录</em>
              <em>注册</em>
            </span>
            <span className="top" onClick={this.ToTop}>
              <i className="iconfont icon-shangjiantou"></i>TOP
            </span>
          </div>
          <p className="computer-edition">
            <span>提建议</span>
            <span>电脑版</span>
            <span>帮助</span>
          </p>
          <p className="footer-msg">
            Copyright ©2018 北京当当网信息技术有限公司
          </p>
          <p className="footer-msg">北京市朝阳区北三环东路8号，100028</p>
        </div>
        {/* 底部 */}
        {/* 回到顶部开始 */}
        <div
          className={
            this.state.backTop === false
              ? "index-fixed-box-none"
              : "index-fixed-box-block"
          }
          onClick={this.backToTop}
          ref={this.indexcontentRef}
        >
          <i className="iconfont icon-dingbu"></i>
        </div>
        {/* 回到顶部结束 */}
      </div>
    );
  }
}

export default withRouter(Index);
